import { List, DatePicker, Drawer, Modal } from 'antd-mobile'
import classnames from 'classnames'
import { useHistory } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import dayjs from 'dayjs'

import NavBar from '../../../components/NavBar'
import styles from './index.module.scss'

// 导入 性别 对应的抽屉内容
import EditList from './components/EditList'
// 导入 昵称或简介对应的抽屉内容
import EditInput from './components/EditInput'

import { removeToken, http } from '@/utils'

const Item = List.Item
const { alert } = Modal

// 修改头像对应的数据：
const photoItems = [
  { text: '拍照', value: 'picture' },
  { text: '本地选择', value: 'local' }
]
// 修改性别对应的数据：
const genderItems = [
  { text: '男', value: '0' },
  { text: '女', value: '1' }
]

const ProfileEdit = () => {
  const history = useHistory()

  // 创建一个用来获取 file 的ref对象
  const fileRef = useRef(null)

  // 个人资料的状态
  const [userInfo, setUserInfo] = useState({})

  // 性别抽屉的展示或隐藏
  const [listDrawer, setListDrawer] = useState({
    open: false,
    type: 'photo'
  })

  // 昵称或简介对应的状态
  const [inputDrawer, setInputDrawer] = useState({
    open: false,
    // 类型：如果是昵称，值为：name；如果是简介，值为：intro
    type: 'name'
  })

  // 进入页面发送请求
  useEffect(() => {
    const getUserInfo = async () => {
      try {
        const res = await http.get('/user/profile')
        // console.log(res)
        setUserInfo(res.data.data)
      } catch (e) {
        // 如果出错了，需要在此处打印 e 才能看到错误
      }
    }
    getUserInfo()
  }, [])

  // 修改性别的事件
  const onUpdateGender = async gender => {
    try {
      await http.patch('/user/profile', {
        gender
      })

      setUserInfo({
        ...userInfo,
        gender: +gender
      })

      // 关闭抽屉
      onGenderClose()
    } catch (e) {}
  }

  // 修改头像的事件
  const onUpdatePhoto = type => {
    fileRef.current.click()
  }
  // input[type="file"] 标签的 change 事件
  // 通过事件对象，可以拿到选择的照片
  const onPhotoChagne = async e => {
    try {
      const file = e.target.files[0]
      const formData = new FormData()
      formData.append('photo', file)

      const res = await http.patch('/user/photo', formData)

      setUserInfo({
        ...userInfo,
        photo: res.data.data.photo
      })
    } catch {
    } finally {
      // 关闭抽屉
      onGenderClose()
    }
  }

  // 性别列表项的点击事件
  const onGenderOpen = () => {
    setListDrawer({
      open: true,
      type: 'gender'
    })
  }
  // 头像列表项的点击事件
  const onPhotoOpen = () => {
    setListDrawer({
      open: true,
      type: 'photo'
    })
  }

  // 昵称的点击事件
  const onNameClick = () => {
    setInputDrawer({
      open: true,
      type: 'name'
    })
  }

  // 简介的点击事件
  const onIntroClick = () => {
    setInputDrawer({
      open: true,
      type: 'intro'
    })
  }

  // 更新昵称
  const onUpdateName = async name => {
    try {
      await http.patch('/user/profile', {
        name
      })

      // 更新状态
      setUserInfo({
        ...userInfo,
        name
      })

      // 关闭抽屉
      onInputClose()
    } catch {}
  }
  // 更新简介
  const onUpdateIntro = async intro => {
    try {
      await http.patch('/user/profile', {
        intro
      })

      // 更新状态
      setUserInfo({
        ...userInfo,
        intro
      })

      // 关闭抽屉
      onInputClose()
    } catch {}
  }

  // 关闭昵称或简介的抽屉
  const onInputClose = () => {
    setInputDrawer({
      ...inputDrawer,
      open: false
    })
  }

  // 关闭性别对应的抽屉
  const onGenderClose = () => {
    // 只修改其中的一个状态值
    setListDrawer({
      ...listDrawer,
      open: false
    })
  }

  // 退出功能
  const logout = () => {
    alert('温馨提示', '你确定退出吗？', [
      { text: '取消' },
      {
        text: '确认',
        // 修改按钮的颜色
        style: { color: '#fc6627' },
        onPress: () => {
          // 移除本地token
          removeToken()
          // 跳转到登录页面
          history.push('/login')
        }
      }
    ])
  }

  // 修改生日
  const onBirthdayChange = async date => {
    const birthday = dayjs(date).format('YYYY-MM-DD')

    try {
      await http.patch('/user/profile', {
        birthday
      })

      setUserInfo({
        ...userInfo,
        birthday
      })
    } catch {}
  }

  // 约定：
  // name 第一次渲染时没有值
  //      以后的每次渲染都是有值的
  const { photo, name, intro = '', gender, birthday } = userInfo
  console.log('name', name)

  // 昵称对应的数据
  const nameConfig = {
    text: '昵称',
    value: name
  }

  // 简介对应的数据
  const introConfig = {
    text: '简介',
    value: intro
  }

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar onClick={() => history.go(-1)}>个人信息</NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              arrow="horizontal"
              extra={
                <span className="avatar-wrapper">
                  <img
                    src={
                      photo || 'http://toutiao.itheima.net/images/user_head.jpg'
                    }
                    alt=""
                  />
                </span>
              }
              onClick={onPhotoOpen}
            >
              头像
            </Item>
            <Item arrow="horizontal" extra={name} onClick={onNameClick}>
              昵称
            </Item>
            <Item
              arrow="horizontal"
              extra={
                <span className={classnames('intro', intro && 'normal')}>
                  {intro || '未填写'}
                </span>
              }
              onClick={onIntroClick}
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              arrow="horizontal"
              extra={gender === 0 ? '男' : '女'}
              onClick={onGenderOpen}
            >
              性别
            </Item>
            {/* 注意：日期需要设置 DatePicker 的 value 属性才有效 */}
            <DatePicker
              mode="date"
              value={new Date(birthday)}
              onChange={onBirthdayChange}
              title="选择年月日"
              minDate={new Date(1900, 0, 1, 0, 0, 0)}
              maxDate={new Date()}
            >
              <Item arrow="horizontal">生日</Item>
            </DatePicker>
          </List>

          {/* 此处是一个隐藏的 file 标签 */}
          <input type="file" hidden ref={fileRef} onChange={onPhotoChagne} />
        </div>

        <div className="logout">
          <button className="btn" onClick={logout}>
            退出登录
          </button>
        </div>
      </div>

      {/* 抽屉组件 */}
      {/* 头像、性别 */}
      <Drawer
        open={listDrawer.open}
        onOpenChange={onGenderClose}
        className="drawer-list"
        position="bottom"
        sidebar={
          <EditList
            items={listDrawer.type === 'photo' ? photoItems : genderItems}
            onClose={onGenderClose}
            onUpdateGender={
              listDrawer.type === 'photo' ? onUpdatePhoto : onUpdateGender
            }
          />
        }
      >
        {''}
      </Drawer>
      {/* 昵称、简介 */}
      <Drawer
        open={inputDrawer.open}
        className="drawer"
        position="right"
        sidebar={
          // 延迟渲染 EditInput 组件
          // 也就是只在 name 有值的情况下，才渲染 EditInput 组件

          // 利用 key 的特性来实现让 EditInput 组件在打开抽屉时，能够获取到正确的内容
          // 原理： React 会比较更新前后的 key 是否相同，如果相同就复用该组件；
          //       如果不同，就会卸载原来的EditInput组件，然后，重新渲染EditInput组件
          <EditInput
            key={name}
            config={inputDrawer.type === 'name' ? nameConfig : introConfig}
            onUpdate={
              inputDrawer.type === 'name' ? onUpdateName : onUpdateIntro
            }
            onClose={onInputClose}
          />

          // name ? (
          //   <EditInput
          //     config={inputDrawer.type === 'name' ? nameConfig : introConfig}
          //     onUpdate={
          //       inputDrawer.type === 'name' ? onUpdateName : onUpdateIntro
          //     }
          //     onClose={onInputClose}
          //   />
          // ) : (
          //   ''
          // )
        }
      >
        {''}
      </Drawer>
    </div>
  )
}

export default ProfileEdit
